<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <!--Extjs version 6.2.0 -->
    <link href="css/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="locale/locale-zh_CN.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript">
        //Absolute布局
        Ext.application({
            name: "HelloExt",
            launch: function() {
                Ext.create('Ext.form.Panel', {
                    title: 'Absolute布局',
                    width: 300,
                    height: 275,
                    x: 200,
                    y: 90,
                    layout: 'absolute',
                    defaultType: 'textfield',
                    items: [{
                        x: 10,
                        y: 10,
                        xtype: 'label',
                        text: 'Send To:'
                    }, {
                        x: 80,
                        y: 10,
                        name: 'to',
                        anchor: '90%' //控件从居左80px处，拉长到居左90%处
                    }, {
                        x: 10,
                        y: 40,
                        xtype: 'label',
                        text: 'Subject:'
                    }, {
                        x: 80,
                        y: 40,
                        name: 'subject',
                        anchor: '90%'
                    }, {
                        x: 0,
                        y: 80,
                        xtype: 'textareafield',
                        name: 'msg',
                        anchor: '100% 80%' //控件从居左0px处拉长100%，空间从居上80px处，拉长至余下控件高度的80%处
                    }],
                    renderTo: Ext.getBody()
                });
            }
        });
    </script>
</head>

<body>

</body>

</html>